<template>
	<section >  
		<template v-for="( menu) in menus">
			<div v-if="menu.name " class="menu"  :key='menu.path' >
				<a class="menu-item"   @click="goto(menu.url )"
				:style="{'padding-left':(level * 2)+'rem', }" >
					{{menu.name }}
				</a> 
				<Menu v-if="menu.children && menu.children.length > 0" :menus="menu.children" :level="level + 1"></Menu>
			</div> 
		</template> 
	</section>
</template>

<script>
	export default {
		name:"Menu",
		data(){ 
			return {   
			}
		},
		
		props:['menus', 'level'],
		
		created(){ 
		},
		
		methods:{
			goto(path){
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped="scoped"> 
	.menu{
		text-align: left; 
	}
	.menu-item{ 
		padding:10px 0 10px 0;
		display: block; 
	}
	.menu-item:hover{
		background-color: #EDEADD;
		color: #993300;
	}
</style>
